<template>
  <view class="content">
    <view class="list-block">
      <view class="item-block1" style="border-radius: 10rpx;">
        <view class="search-block pl-20 pr-20">
          <u-search
            placeholder="请输入姓名"
            borderColor="#eee"
            bgColor="#ffffff"
            shape="square"
            v-model="params.nickname"
            action-text="搜索"
            :action-style="{ color: '#3F99F7', fontWeight: '500' }"
            @custom="submit()"
            @search="submit()"
          ></u-search>
        </view>
      </view>
    </view>
    <view v-if="JSON.stringify(list) != '[]'" class="list-block">
      <!-- <view class="item-block1">
        <view class="search-block pl-20 pr-20">
          <u-search
            placeholder="请输入姓名"
            borderColor="#eee"
            bgColor="#ffffff"
            shape="square"
            v-model="params.nickname"
            action-text="搜索"
            :action-style="{ color: '#3F99F7', fontWeight: '500' }"
            @custom="submit()"
            @search="submit()"
          ></u-search>
        </view>
      </view> -->
      <view
        class="item-block mt-20"
        v-for="(item, index) in list"
        :key="index"
        @click="
          routeByUrl(item)
        "
      >
        <view class="item-icon">
          <u-icon name="account-fill" color="#2979ff" size="50"></u-icon>
        </view>
        <view class="item-content">
          <view class="item-information">
            <view class="item-name">{{
              item.nickname ? item.nickname : "-"
            }}</view>
            <view class="item-phone">{{
              item.mobile ? item.mobile : "-"
            }}</view>
          </view>
          <view class="item-company">
            {{ item.deptName ? item.deptName : "-" }}
          </view>
        </view>
      </view>
    </view>
    <view v-else class="empty-block">
      <u-empty text="暂无数据" mode="data" icon-size="80"></u-empty>
    </view>
  </view>
</template>

<script>
import { getAllUserApi } from "@/apis/safetyProductionResponsibilitySystem/safetyProductionResponsibility.js";
export default {
  data() {
    return {
      params: {
        pageNo: 1,
        pageSize: 10,
        nickname: "",
      },
      list: [],
      pushState: true,
    };
  },
  onPullDownRefresh() {
    this.getDangerEditList(
      Object.assign(this.params, { pageNo: 1, pageSize: 10 })
    );
  },
  onReachBottom() {
    if (this.pushState)
      this.getDangerEditList(
        Object.assign(this.params, { pageNo: this.params.pageNo + 1 }),
        false
      );
  },

  /**
   * 接受路由传参
   */
  onLoad(options) {
    if (options.users) {
      this.list = JSON.parse(options.users)
    }else{
      this.getDangerEditList(Object.assign(this.params, { pageNo: 1 }));
    }
    console.log(options, "options, options, options, options");
  },

  onShow() {
  },
  methods: {
    getDangerEditList: function (params, freshState = true) {
      getAllUserApi(params)
        .then((res) => {
          if (freshState) {
            this.pushState = true;
            this.list = res.list;
          } else {
            this.list = this.list.concat(res.list);
          }
          if (res.list.length < this.params.pageSize) this.pushState = false;
          uni.stopPullDownRefresh();
        })
        .catch((err) => console.warn(err));
    },
    submit: function () {
      let params = JSON.parse(JSON.stringify(this.params));
      if (params.startTime)
        Object.assign(params, { startTime: `${params.startTime} 00:00:00` });
      if (params.endTime)
        Object.assign(params, { endTime: `${params.endTime} 23:59:59` });
      Object.assign(params, { pageNo: 1 });
      this.getDangerEditList(params);
    },
    routeByUrl: function (item) {
      console.log(item)
      // console.log(url)
      if(item.id){
        uni.navigateTo({
          url: `/safetyProductionResponsibilitySystem/personnelFiles/personalInformation?userId=${item.id}`
        });
      }else{
        // var users = JSON.stringify(item)
        uni.navigateTo({
          // url: '/safetyProductionResponsibilitySystem/personnelFiles/personalInformation?users='+ users
          url: `/safetyProductionResponsibilitySystem/personnelFiles/personalInformation?userId=${item.userId}`

        });
      }
    },
  },
};
</script>

<style>
page {
  background-color: #f4f4f4;
}
</style>

<style lang="scss" scoped>
.border-b-common {
  border-bottom: 1rpx solid #f4f4f4;
}
.content {
  padding: 0rpx 25rpx 50rpx 25rpx;
  .tab-block {
    background-color: #ffffff;
    z-index: 99;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  .list-block {
    .item-block {
      background-color: #ffffff;
      border-radius: 6rpx;
      box-shadow: 0 0 10rpx 0 #f4f4f4;
      padding: 25rpx;
      margin-top: 25rpx;
      display: flex;
      .item-icon {
        width: 120rpx;
        height: 110rpx;
        margin-top: 20rpx;
      }
      .item-content {
        padding: 20rpx 10rpx;
        .item-information {
          height: 40rpx;
          display: flex;
          .item-name {
            height: 40rpx;
            font-size: 30rpx;
            line-height: 40rpx;
            margin: 0 30rpx;
          }
          .item-phone {
            height: 40rpx;
            font-size: 25rpx;
            line-height: 40rpx;
          }
        }
        .item-company {
          height: 40rpx;
          font-size: 30rpx;
          line-height: 40rpx;
          margin-left: 30rpx;
          margin-top: 30rpx;
        }
      }
    }
    .item-block1 {
      background-color: #ffffff;
      border-radius: 6rpx;
      box-shadow: 0 0 10rpx 0 #f4f4f4;
      padding: 25rpx;
      margin-top: 25rpx;
    }
  }
  .empty-block {
    padding-top: 300rpx;
  }
}
</style>
